<template>
  <Panel title="账号列表">
    <!-- 主要内容 -->
    <div slot="container">
      <!-- 数据列表 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 账号 -->
        <el-table-column prop="account" label="账号"> </el-table-column>
        <!-- 用户组 -->
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <!-- 创建时间 -->
        <el-table-column label="创建时间">
          <template slot-scope="scope">{{
            scope.row.ctime | normalDate
          }}</template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="亲,您确定删除吗?"
              class="ml10"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑弹窗 -->
      <el-dialog title="修改账号信息" :visible.sync="dialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="账号" label-width="80px">
            <el-input v-model="editForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户组" prop="userGroup" label-width="80px">
            <el-select v-model="editForm.userGroup" placeholder="请选择用户组">
              <el-option label="普通管理员" value="普通管理员"></el-option>
              <el-option label="超级管理员" value="超级管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="mt20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 底部操作按钮 -->
      <div class="mt20">
        <el-button type="danger" size="small" @click="batchBtn"
          >批量删除</el-button
        >
        <el-button type="primary" size="small" @click="toggleSelection"
          >取消选择</el-button
        >
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";
import { reqAccList, reqAccDel, reqAccBatchDel,reqEditAcc } from "@/api/user";

export default {
  components: {
    Panel,
  },

  data() {
    return {
      // 列表数据
      tableData: [],

      //分页
      currentPage: 1, //当前页码值,一定要以1开始
      pageSize: 5, //每一页显示多少条
      total: 0, //总共条数

      // 批量删除id
      ids: [],

      //编辑弹框
      dialogFormVisible: false,

      //编辑的数据
      editForm: {
        account: "",
        userGroup: "",
      },
    };
  },
  created() {
    this.getData();
  },

  methods: {
    //1.获取列表数据
    async getData() {
      //2.发送ajax
      let res = await reqAccList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });

      //3.解构
      let { data, total } = res.data;

      //判定---如果把当前页数据清空后,需要回拉一页,显示前一页的数据,如果已经是第一页,不操作
      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1; //回拉一页
        this.getData(); //重新渲染数据
      }

      //4.处理数据格式
      //5.把处理好的数据放到指定位置
      this.tableData = data;
      this.total = total;
      // console.log(data);
    },
    //2.删除功能
    async handleDelete(id) {
      //发送ajax
      let res = await reqAccDel({ id });

      //判定
      if (res.data.code == 0) {
        // this.$message.success(res.data.msg);
        //重新获取数据
        this.getData();
      }
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    // 把选中需要删除的id放到ids中
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },

    //批量删除功能
    batchBtn() {
      //判定是否有选中的选项, 至少选中一个,才进行下一步操作,否则给到提示
      if (this.ids.length) {
        // console.log('可以进行删除');
        this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            //发送ajax批量删除
            let res = await reqAccBatchDel({ ids: this.ids });
            //判定

            let { code, msg } = res.data;
            if (code == 0) {
              // //提示
              // this.$message({
              //   type: "success",
              //   message: msg,
              // });
              //重新渲染
              this.getData();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message({
          type: "error",
          message: "请选择您要批量删除的账号",
        });
      }
    },

    //取消全选
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },

    //编辑功能
    handleEdit(row) {
      //把当前行数据设置到editForm上
      this.editForm = { ...row };
      //弹出对话框
      this.dialogFormVisible = true;
    },


    //保存修改信息
    async saveEdit(){
      //保存数据
      let res=await reqEditAcc(this.editForm);

      //判定
      if(res.data.code==0){
        //提示
        // this.$message.success(res.data.msg);
        this.dialogFormVisible=false;
        this.getData()
      }
    }

  },
};
</script>

<style lang="less" scoped>
.mt20 {
  margin-top: 20px;
}
.ml10 {
  margin-left: 10px;
}
/deep/.el-dialog {
  width: 500px;
}
.el-input {
  width: 300px;
}
</style>